/*
 * $Id: group.scss 239 2012-11-09 06:48:54Z bobcat $
 * Styles specific to group listing pages go here. Mobile styles are
 * also specified here, to be overwritten in _queries.scss.
 */

// imports
@import '../main/main';

// classes
.front .gallery {
  text-align: center;
}

.gallery { // slideshow styles
  height: 100%;
  position: relative;
  overflow: hidden;

  a {
    @include border-radius(.5em);
    border: $border-width solid $border-color;
    display: block;
    font-size: 1.75em;
    padding: .5em 0 .25em 0;
  }

  article {
    position: absolute;
    left: 0;
    text-align: center;
    background: white;
    margin: 0;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 1;

    &.first {
      display: inline-block;
    }

    h4 {
      font-size: .85em;
      margin-bottom: .5em;
    }

    img {
      @include border-radius(1.5em);
      clear: both;
      display: block;
      margin: 0 auto;
      border: 0;
      width: 94%;
    }
  }

  :target + article {
    display: inline-block;
    z-index: 2;
  }

  .prev, .next {
    @include clean-gray(#4682B4, #fff);
    display: inline-block;
    width: 45%;
    margin-top: .5em;
  }

  .prev {
    float: left;
  }

  .next {
    float: right;
  }
}

// ids
#center-col {
  h2 {
    display: block;
    line-height: 1.4;
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 1em;
    padding: 0;
  }

  .breadcrumbs {
    margin-bottom: 1.5em;
  }
}

#groups { // slideshow styles
  height: 29em;
  margin: 0 auto;
}

#whats-new {
  text-align: left;
  display: block;
  width: 100%;
}

// media queries
@import 'queries';
